<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #a1a3a9;
            border-radius: 3px;
        }
    </style>
</head>
<body>
<div id="app" style="margin-top:2vh">
    <!--    <el-button @click="genIds">生成ID</el-button>-->
    <el-row style="margin-bottom:1vh">
        <el-col :span="5">&nbsp;</el-col>
        <el-col :span="14">
            <div style="font-size: 30px;
            font-weight: bold;
            text-align: center;">
                <el-avatar style="vertical-align: middle; margin-top: -6px" src="/imgs/logo.png"></el-avatar>
                航空制造术语检索<i
                        @click="refresh"
                        style="color: #409EFF; font-weight: bold"
                        class="el-icon-refresh"></i>
            </div>
        </el-col>
        <el-col :span="5">&nbsp;</el-col>
    </el-row>
    <el-row>
        <el-col :span="3">&nbsp;</el-col>
        <el-col :span="18">
            <el-table
                    :data="list"
                    :stripe="true"
                    :highlight-current-row="true"
                    max-height="800"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="序号"
                        width="50">
                </el-table-column>
                <el-table-column
                        width="100"
                        label="英文缩写"
                        prop="en_short">
                </el-table-column>
                <el-table-column
                        label="英文全称"
                        prop="en_full">
                </el-table-column>
                <el-table-column
                        label="中文缩写"
                        prop="cn_short">
                </el-table-column>
                <el-table-column
                        label="中文全称"
                        prop="cn_full">
                </el-table-column>
                <el-table-column
                        label="描述"
                        prop="desc">
                </el-table-column>
                <el-table-column
                        width="240"
                        align="right">
                    <template slot="header" slot-scope="scope">
                        <el-row :gutter="10">
                            <el-col :span="8">
                                <el-button size="mini" type="primary"
                                           style="display: inline-block"
                                           @click="handleAdd">Add
                                </el-button>
                            </el-col>
                            <el-col :span="16">
                                <el-input
                                        width="100"
                                        v-model="words"
                                        @input="searchTerms"
                                        size="mini"
                                        placeholder="输入关键字搜索"></el-input>
                            </el-col>
                        </el-row>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">Edit
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">Delete
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="size=>{
                    paged.size = size;
                     searchTerms();
                    }"
                    @current-change="searchTerms"
                    :current-page.sync="paged.cur"
                    :page-sizes="[10, 30, 50, 100, 200]"
                    :page-size="paged.size"
                    layout="sizes, prev, pager, next"
                    :total="paged.total">
            </el-pagination>
        </el-col>
        <el-col :span="3"></el-col>
    </el-row>

    <!--修改弹窗-->
    <el-dialog title="修改术语"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="dialogFormVisible">
        <el-form :model="editObj"
                 style="margin-right: 50px"
        >

            <el-form-item label="英文缩写" label-width="120px">
                <el-input v-model="editObj.en_short"
                          maxlength="50"
                          autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="英文全称" label-width="120px">
                <el-input v-model="editObj.en_full"
                          maxlength="200"
                          autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="中文缩写" label-width="120px">
                <el-input v-model="editObj.cn_short"
                          maxlength="50"
                          autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="中文全称" label-width="120px">
                <el-input v-model="editObj.cn_full"
                          maxlength="200"
                          autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" label-width="120px">
                <el-input type="textarea" v-model="editObj.desc" autocomplete="off"
                          maxlength="300"
                          rows="10"
                          :show-word-limit="true"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="edit">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        visible: false,
        paged: {
          cur: 1,
          size: 10,
          total: 0
        },
        list: [],
        words: '',
        form: {
          name: '22'
        },
        dialogFormVisible: false,
        editObj: {
          en_short: "",
          en_full: "",
          cn_short: "",
          cn_full: "",
          desc: "",
          ifAdd: false
        },
      }
    },
    created() {
      this.searchTerms()
    },
    methods: {
      searchTerms() {
        axios.post('/search', {
          ...this.paged,
          words: this.words
        })
          .then((response) => {
            let data = response.data;
            this.list = data.data
            this.paged = data.paged
          })
          .catch((error) => {
            console.error(error);
          });
      },
      refresh() {
        console.log(33)
        axios.post('/refresh', {})
          .then((response) => {
            this.searchTerms()
            this.$message({
              type: 'success',
              message: '成功刷新缓存!'
            });
          })
          .catch((error) => {
            this.$message({
              type: 'info',
              message: error
            });
          });
      },
      handleEdit(index, row) {
        this.editObj = this.list[index]
        this.dialogFormVisible = true;
        this.editObj.ifAdd = false
      },
      edit() {
        if (this.editObj.ifAdd) return this.add()
        axios.post('/edit', this.editObj)
          .then((response) => {
            let data = response.data;
            if (data === 'exists') {
              this.$message({
                type: 'warning',
                message: '不能修改为已存在的术语!'
              });
            } else if (data === 'null') {
              this.$message({
                type: 'warning',
                message: 'en_short 不能为空!'
              });
            } else {
              this.searchTerms()
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.dialogFormVisible = false;
            }
          })
          .catch((error) => {
            this.$message({
              type: 'info',
              message: error
            });
          });
      },
      handleAdd() {
        this.editObj.en_short = ''
        this.editObj.en_full = ''
        this.editObj.cn_short = ''
        this.editObj.cn_full = ''
        this.editObj.desc = ''
        this.editObj.ifAdd = true
        this.dialogFormVisible = true;
      },
      add() {
        axios.post('/add', this.editObj)
          .then((response) => {
            let data = response.data;
            if (data === 'exists') {
              this.$message({
                type: 'warning',
                message: '已存在术语,不能添加!'
              });
            } else {
              this.searchTerms()
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.dialogFormVisible = false
            }
          })
          .catch((error) => {
            this.$message({
              type: 'info',
              message: error
            });
            this.dialogFormVisible = false
          });
      },
      handleDelete(index, row) {
        this.$confirm('将永久删除该术语, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/del', {
            _id: this.list[index]._id
          })
            .then((response) => {
              this.searchTerms()
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })
            .catch((error) => {
              this.$message({
                type: 'info',
                message: error
              });
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  })
</script>
</html>
